<template>
  <div class="my">
    <el-page-header @back="$router.go(-1)" content="用户设置" class="header">
    </el-page-header>
    <div class="content">
      <div class="card">
        <div class="card_body">
          <div class="cl" @click="dialogVisible = true">
            <el-avatar
              shape="square"
              :size="70"
              :src="userinfo.avatar"
            ></el-avatar>
            <el-descriptions
              style="margin-top: 30px"
              title="用户信息"
              :column="1"
              direction="vertical"
            >
              <el-descriptions-item label="用户名">
                {{ userinfo.truename }}
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{ userinfo.tel }}
              </el-descriptions-item>
              <el-descriptions-item label="职位">
                {{ userinfo.role_name }}
              </el-descriptions-item>
              <el-descriptions-item label="我的权限">
                <el-button
                  type="success"
                  size="mini"
                  @click.stop="drawer = true"
                  >查看</el-button
                >
              </el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="cr">
            <el-descriptions direction="vertical" title="账号信息">
              <el-descriptions-item label="账号">
                {{ userinfo.username }}
              </el-descriptions-item>
              <el-descriptions-item label="密码">
                <span>{{ value ? userinfo.password : "*****" }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="查看密码">
                <el-switch
                  v-model="value"
                  active-color="#13ce66"
                  inactive-color="#cfcfcf"
                  @change="show"
                >
                </el-switch>
              </el-descriptions-item>
            </el-descriptions>

            <el-divider></el-divider>

            <!-- 上传头像 -->
            <h3>上传头像</h3>
            <div class="upload">
              <div class="eleme">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  action=""
                  :before-upload="beforeUpload"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :auto-upload="true"
                  :show-file-list="false"
                >
                  <el-button slot="trigger" size="small" type="primary"
                    >选取图片</el-button
                  >
                  <el-button
                    style="margin-left: 10px"
                    size="small"
                    type="success"
                    @click="submitUpload"
                    >上传头像</el-button
                  >
                  <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
                </el-upload>
              </div>
              <div>
                <br />
                <el-button
                  type="primary"
                  icon="el-icon-refresh-right"
                  circle
                  @click="rotateRight"
                ></el-button>
                <el-button
                  type="success"
                  icon="el-icon-refresh-left"
                  circle
                  @click="rotateLeft"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-plus"
                  circle
                  @click="changeScale(1)"
                ></el-button>
                <el-button
                  type="warning"
                  icon="el-icon-minus"
                  circle
                  @click="changeScale(-1)"
                ></el-button>
              </div>
              <div class="cropper">
                <div
                  class="cropper-content"
                  style="margin-top: 60px; margin-left: 60px"
                >
                  <div class="cropper">
                    <vueCropper
                      ref="cropper"
                      :img="option.img"
                      :outputSize="option.size"
                      :outputType="option.outputType"
                      :info="true"
                      :full="option.full"
                      :canMove="option.canMove"
                      :canMoveBox="option.canMoveBox"
                      :original="option.original"
                      :autoCrop="option.autoCrop"
                      :autoCropWidth="option.autoCropWidth"
                      :autoCropHeight="option.autoCropHeight"
                      :fixedBox="option.fixedBox"
                      @realTime="realTime"
                      @imgLoad="imgLoad"
                    ></vueCropper>
                  </div>
                  <div style="margin-left: 20px">
                    <div
                      class="show-preview"
                      :style="{
                        width: '150px',
                        height: '155px',
                        overflow: 'hidden',
                        margin: '5px',
                      }"
                    >
                      <div :style="previews.div" class="preview">
                        <img :src="previews.url" :style="previews.img" />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 权限展示 -->
    <el-drawer
      :title="userinfo.role_name + '的权限'"
      :visible.sync="drawer"
      direction="rtl"
    >
      <el-tree
        style="margin: 10px"
        :data="authlist"
        :props="defaultProps"
        accordion="true"
      ></el-tree>
    </el-drawer>

    <!-- 展示头像 -->
    <el-dialog title="头像" :visible.sync="dialogVisible" width="60%">
      <img width="100%" height="100%" :src="userinfo.avatar" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { VueCropper } from "vue-cropper"; // 裁剪

export default {
  components: { VueCropper },
  data() {
    return {
      userinfo: {}, // 用户信息
      drawer: false, // 抽屉显示
      dialogVisible: false, // 头像展示
      authlist: [], // 权限列表
      defaultProps: {
        // 树结构配置项
        children: "children",
        label: "name",
      },
      value: false, // 开关 查看密码

      // 上传头像
      headImg: "",
      //剪切图片上传
      crap: false,
      previews: {},
      option: {
        img: "",
        outputSize: 1, //剪切后的图片质量（0.1-1）
        full: false, //输出原图比例截图 props名full
        outputType: "png",
        canMove: true,
        original: false,
        canMoveBox: true,
        autoCrop: true,
        autoCropWidth: 150,
        autoCropHeight: 150,
        fixedBox: true,
      },
      fileName: "", //本机文件地址
      downImg: "#",
      imgFile: "",
      uploadImgRelaPath: "", //上传后的图片的地址（不带服务器域名）
    };
  },
  mounted() {
    // 挂载后调用
    this.getuser();
    this.getMyauth();
  },
  methods: {
    async getMyauth() {
      // 获取数据
      console.log(this.userinfo);
      let { man_id } = this.userinfo;
      let res = await this.$api.GetMyAuth({ man_id });
      // console.log(res);
      if (res.data.code == 200) {
        this.authlist = res.data.data;
        // console.log(this.authlist);
      }
    },
    show(v) {
      // 查看密码
      console.log(v);
      this.value = v;
    },
    getuser() {
      this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    },

    /// 上传头像
    submitUpload(file) {
      // this.$refs.upload.submit();
      this.finish("blob");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
      //   let data = window.URL.createObjectURL(new Blob([file]));
      //   this.option.img = data;
    },
    beforeUpload(file) {
      console.log("上传文件");
      console.log(file);
      let data = window.URL.createObjectURL(new Blob([file]));
      this.fileName = file.name;
      this.option.img = data;
    },
    //放大/缩小
    changeScale(num) {
      console.log("changeScale");
      num = num || 1;
      this.$refs.cropper.changeScale(num);
    },
    //坐旋转
    rotateLeft() {
      console.log("rotateLeft");
      this.$refs.cropper.rotateLeft();
    },
    //右旋转
    rotateRight() {
      console.log("rotateRight");
      this.$refs.cropper.rotateRight();
    },
    //上传图片（点击上传按钮）
    finish(type) {
      console.log("finish");
      let _this = this;
      let formData = new FormData(); // 上传图片的传参格式
      // 输出
      if (type === "blob") {
        console.log(6666);
        this.$refs.cropper.getCropBlob((data) => {
          let img = window.URL.createObjectURL(data);
          this.model = true;
          this.modelSrc = img;
          // console.log(data)
          // return
          formData.append("file", data, this.fileName);
          formData.append("man_id", this.userinfo.man_id);
          this.$api
            .Upimg(formData, {
              contentType: false,
              processData: false,
              headers: { "Content-Type": "application/x-www-form-urlencoded" },
            })
            .then((res) => {
              console.log(res);
              // 上传成功
              if (res.data.code == 200) {
                this.getimg();
              }
            });
        });
      } else {
        this.$refs.cropper.getCropData((data) => {
          this.model = true;
          this.modelSrc = data;
        });
      }
    },
    // 实时预览函数
    realTime(data) {
      console.log("realTime");
      this.previews = data;
    },
    imgLoad(msg) {
      console.log("imgLoad");
      console.log(msg);
    },
    getimg() {
      // 重新获取头像
      let { username, password } = this.userinfo;
      this.$api.Login({ username, password }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          // 存token
          // sessionStorage.setItem("token",res.data.token)
          // 存用户信息
          sessionStorage.setItem("userinfo", JSON.stringify(res.data.data));
          this.getuser();
          // this.$router.push("/menu")
        }
      });
    },
  },
};
</script>

<style scoped>
.header {
  width: 100%;
  height: 6vh;
  line-height: 6vh;
  background-color: rgb(117, 117, 117);
}
.header >>> div {
  color: aliceblue;
  font-size: 18px;
}
.content {
  height: 94vh;
  background-color: darkgrey;
  width: 100%;
  /* position: relative; */
  overflow: hidden;
}
.card {
  width: 80vw;
  height: 85vh;
  background-color: azure;
  margin: 30px auto;
  /* position: absolute; */
  border-radius: 5px;
  box-shadow: 2px 2px 14px black;
}
.card_body {
  width: 100%;
  height: 100%;
  display: flex;
}
.cl {
  flex: 1.5;
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cr {
  flex: 5;
  height: 100%;
  padding: 15px;
}

/* 上传头像 */
.cropper-content {
  min-width: 540px;
  display: flex;
}
.cropper {
  width: 260px;
  height: 260px;
}
.show-preview {
  flex: 1;
  -webkit-flex: 1;
  display: flex;
  display: -webkit-flex;
  justify-content: center;

  -webkit-justify-content: center;
}
.preview {
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid #cccccc;
  background: #cccccc;
  margin-left: 40px;
}
.cropper-content .show-preview .preview {
  margin-left: 0;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -khtml-user-select: none;
  user-select: none;
}
.upload {
  margin-top: 10px;
}
</style>